<template>
  <div class="home">
    <!-- 轮播图注意需要通过设置高的样式让图片展示出来，不然高度为0 -->
    <mt-swipe :auto='4000' class='swiper'>
      <mt-swipe-item v-for='(item,index) in imgList' :key='index' >
        <img :src="item" alt="轮播图">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 导航菜单 -->
    <!-- div>ul.nav-box>li.nav-item*6>i>img[src='../assets/imgs/menu0$.png']^p -->
    <div>
      <ul class="nav-box">
        <li class="nav-item" @click='jumpTo("newslist")'>
          <i><img src="../assets/imgs/menu01.png" alt=""></i>
          <p>新闻资讯</p>
        </li>
        <li class="nav-item" @click='jumpTo("imglist")'>
          <i><img src="../assets/imgs/menu02.png" alt=""></i>
          <p>图片共享</p>
        </li>
        <li class="nav-item" @click='jumpTo("goodslist")'>
          <i><img src="../assets/imgs/menu03.png" alt=""></i>
          <p>商品购买</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu04.png" alt=""></i>
          <p>留言反馈</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu05.png" alt=""></i>
          <p>视频专区</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu06.png" alt=""></i>
          <p>反馈我们</p>
        </li>
      </ul>
      <!-- 模板插入是以文件名为标签名 -->
      <tab-bar/>
    </div>
  </div>
</template>
<script>
// 引入组件
import TabBar from '@/components/tab-bar'
export default {
  components: {
    TabBar
  },
  data () {
    return {
      imgList: [
        'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg'
      ]
    }
  },
  methods: {
    jumpTo (pathName) {
      this.$router.push({name: pathName})
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    .swiper {
      height: 205px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .nav-box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      .nav-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        margin: 10px 0;
        cursor: pointer;
        p {
          font-size: 20px;
        }
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
</style>
